<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;">
      <el-form
        :inline="true"
        :model="filters"
        :size="size"
        ref="filters"
        class="border"
        style="margin-bottom: 15px;"
      >
        <div style="width: 100%;">
          <el-form-item style="width:32%">
            <span style="color: #999;">活动名称</span>
            <span style="margin-left:10px;">满赠7折</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">活动ID</span>
            <span style="margin-left:10px;">1912300007587965</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">当前状态</span>
            <span style="margin-left:10px;">待提交</span>
          </el-form-item>
        </div>
      </el-form>
      <el-form
        :inline="true"
        :model="filters"
        :size="size"
        ref="filters"
        style="text-align: right;"
      >
        <el-row class="margin-top:5px;margin-bottom:5px">
           <el-button type="primary" @click="subCheck">查看营销报告</el-button>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-alert
        :closable="false"
        style="background-color: #ffffff;color: #ffffff;"
        title
        type="success"
      />
      <el-tabs type="border-card">
        <el-tab-pane label="促销规则">
          <div>
            <form class="form-horizontal">
              <div class="pdL10 border-left font-bold mgB15 ng-binding">基本信息</div>
              <div class="form-group">
                <!--活动名称-->
                <label
                  class="col-sm-2 control-label ng-binding"
                  ng-show="promotionDetailContent.promotionMethod != 17"
                >活动名称：</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">你来我就送</div>
              </div>
              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div class="form-group">
                <!--活动时间-->
                <label class="col-sm-2 control-label ng-binding">活动时间：</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
                <div
                  class="col-sm-10 pdt3px themeTextColor ng-binding"
                >2019-12-25 20:07:02 至 2019-12-27 20:07:04</div>
              </div>
              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding">活动规则</div>
              <div class="form-group ng-scope">
                <!--活动类型(促销类型)-->
                <label class="col-sm-2 control-label ng-binding">活动类型：</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">赠送类促销</div>
              </div>

              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div class="form-group">
                <label class="col-sm-2 control-label ng-binding">活动规则说明：</label>
              </div>
              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">交易规则</div>
              <div class="form-group">
                <!--是否支持折上折-->
                <label class="col-sm-2 control-label ng-binding">是否支持折上折：</label>
                <div class="col-sm-10 pdt3px themeTextColor">
                  <span
                    ng-if="promotionDetailContent.canUseDiscount == 0"
                    class="ng-binding ng-scope"
                  >是</span>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div class="form-group">
                <!--是否排斥优惠券-->
                <label class="col-sm-2 control-label ng-binding">是否排斥优惠券：</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide">是否排斥优惠券（尾款支付）</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">否</div>
              </div>
              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div class="form-group ng-scope">
                <!--是否包邮-->
                <label class="col-sm-2 control-label ng-binding">是否包邮：</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">否</div>
              </div>

              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding">参与条件</div>
              <div class="line line-dashed b-b line-lg ng-scope"></div>
              <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                  <label class="col-sm-2 control-label ng-binding">新老用户：</label>
                  <div class="col-sm-10 pdt3px">
                    <span
                      ng-repeat="userScope in promotionDetailContent.userScopeList"
                      class="ng-binding ng-scope"
                    >新用户 &nbsp;</span>
                    <!-- end ngRepeat: userScope in promotionDetailContent.userScopeList -->
                    <span
                      ng-repeat="userScope in promotionDetailContent.userScopeList"
                      class="ng-binding ng-scope"
                    >老用户 &nbsp;</span>
                    <!-- end ngRepeat: userScope in promotionDetailContent.userScopeList -->
                  </div>
                </div>

                <!-- 主赠相同-->
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                  <div ng-repeat="e in memberLevelArray" class="ng-scope">
                    <label
                      class="col-sm-2 control-label ng-binding ng-scope"
                      ng-if="$index==0"
                    >主赠相同：</label>
                    <div class="col-sm-10 pdt3px">
                      <span
                        ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList"
                        class="ng-binding ng-scope"
                      >否 &nbsp;</span>
                    </div>
                  </div>
                </div>

                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                  <label class="col-sm-2 control-label ng-binding">会员类型：</label>
                  <div class="col-sm-10 pdt3px">
                    <span
                      ng-repeat="type in promotionDetailContent.memberTypeList"
                      class="ng-binding ng-scope"
                    >普通会员 &nbsp;</span>
                  </div>
                </div>

                <div
                  class="line line-dashed b-b line-lg"
                  ng-show="canShowActivityPlatformLimitShow()"
                ></div>
                <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">
                  <label class="col-sm-2 control-label ng-binding">活动平台：</label>

                  <div class="col-sm-10 pdt3px">
                    <span
                      ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList"
                      class="ng-binding ng-scope"
                    >APP端 &nbsp;</span>
                    <span
                      ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList"
                      class="ng-binding ng-scope"
                    >PC端 &nbsp;</span>
                    <span
                      ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList"
                      class="ng-binding ng-scope"
                    >微信 &nbsp;</span>
                  </div>
                </div>

                <!-- 是否叠加应用-->
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                  <div ng-repeat="e in memberLevelArray" class="ng-scope">
                    <label
                      class="col-sm-2 control-label ng-binding ng-scope"
                      ng-if="$index==0"
                    >是否叠加应用：</label>
                    <div class="col-sm-10 pdt3px">
                      <span
                        ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList"
                        class="ng-binding ng-scope"
                      >是 （倍量：每满一级优惠一次） ，上限1次</span>
                    </div>
                  </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
                  <!--备注-->
                  <label class="col-sm-2 control-label ng-binding">备注：</label>
                  <div class="col-sm-10 pdt3px themeTextColor">
                    <p
                      ng-bind-html="promotionDetailContent.description|to_trusted"
                      class="ng-binding"
                    ></p>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="参与商家/店铺">
          <el-tabs type="border-card">
            <el-tab-pane label="商家">
              <el-table :data="businessList" border style="width: 100%">
                <el-table-column prop="id" label="商品编码"></el-table-column>
                <el-table-column prop="name" label="商家名称"></el-table-column>
                <el-table-column prop="type" label="组织分类"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="店铺">
              <el-table :data="shopList" border style="width: 100%">
                <el-table-column prop="id" label="店铺编码"></el-table-column>
                <el-table-column prop="name" label="店铺名称"></el-table-column>
                <el-table-column prop="type" label="店铺类型"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="参与商品">
          <div>
            <el-tabs type="border-card">
              <el-tab-pane label="生效商品(1)">
                <div>
                  <div style="margin-bottom: 20px;float: right;margin-top: 5px">
                    <el-button-group>
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="info"
                        icon="el-icon-search"
                        @click="showQueryCondition()"
                      >搜索</el-button>
                    </el-button-group>
                  </div>
                  <div>
                  <div style="padding-top: 40px;padding-bottom: 20px;" v-show="search">
                    <el-form :inline="true">
                      <el-row class="search-input">
                          <el-form-item label="商品条码：">
                        <el-input auto-complete="off" placeholder="请输入"></el-input>
                      </el-form-item>
                      <el-form-item label="商品编号：">
                        <el-input auto-complete="off" placeholder="请输入"></el-input>
                      </el-form-item>
                      <el-form-item label="商家：">
                        <el-input auto-complete="off" placeholder="请输入"></el-input>
                      </el-form-item>
                      <el-form-item label="商品名称：">
                        <el-input  auto-complete="off" placeholder="请输入"></el-input>
                      </el-form-item>
                      </el-row>
                    </el-form>
                    <div class="t_r mb20">
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                      >查询</el-button>
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                      >重置</el-button>
                    </div>
                  </div>
                </div>
                </div>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="id" label="商品编码" width="180"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                  <el-table-column prop="address" label="商品条码"></el-table-column>
                  <el-table-column prop="unit" label="计量单位"></el-table-column>
                  <el-table-column prop="shopName" label="商家名称"></el-table-column>
                  <el-table-column prop="price" label="统一零售价（元）"></el-table-column>
                  <el-table-column prop="markdown" label="直降（元）"></el-table-column>
                  <el-table-column prop="shopLimit1" label="商家单渠道限购"></el-table-column>
                  <el-table-column prop="shopLimit2" label="店铺单渠道限购"></el-table-column>
                  <el-table-column prop="shopLimit3" label="个人单渠道限购"></el-table-column>
                  <el-table-column prop="address" label="订单限购"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="互斥商品(0)">
                <el-table border style="width: 100%">
                  <el-table-column prop="id" label="商品编码" width="180"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                  <el-table-column prop="address" label="商品条码"></el-table-column>
                  <el-table-column prop="unit" label="计量单位"></el-table-column>
                  <el-table-column prop="shopName" label="商家名称"></el-table-column>
                  <el-table-column prop="price" label="互斥记录时间"></el-table-column>
                  <el-table-column prop="markdown" label="操作"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>

          </div>
        </el-tab-pane>
        <el-tab-pane label="参与赠品">
          <div>
            <el-tabs type="border-card">
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column prop="id" label="优惠阶梯"></el-table-column>
                <el-table-column prop="productName" label="促销规则"></el-table-column>
                <el-table-column prop="address" label="促销赠品"></el-table-column>
              </el-table>
            </el-tabs>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import tabPane from "./components/TabPaneCreateGroupon";
export default {
  name: "Tab",
  components: {
    tabPane,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      search: false,
      size: "small",
      filters: {},
      multipleSelection: [],
      businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
      shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
      tableData: [{}]
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    revokeProduct() {
      if (this.multipleSelection.length > 0) {
        this.tableData = [];
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({
          message: "操作失败, 请选择要撤出的商品",
          type: "error"
        });
      }
    },
    createPage() {
      this.$router.push("/CreatePromotion");
    },
    //原按钮功能为跳转
    subCheck() {
      this.$message({ message: "查看成功", type: "success" });
    },
    showQueryCondition() {
      if (this.search == false) {
        this.search = true;
      } else if (this.search == true) {
        this.search = false;
      }
    }
  },
  mounted() {}
};
</script>

<style scoped>
.border {
  color: #666666;
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  border-bottom: 1px solid #666666;
  padding-bottom: 3px;
}
.pdL10 {
  padding-left: 10px !important;
}
.mgB15 {
  margin-bottom: 15px !important;
}
.border-left {
  border-left: 3px #ddd solid !important;
}
.font-bold {
  font-weight: 700;
}
.form-group {
  margin-bottom: 15px !important;
  margin-right: -0px !important;
  margin-left: -0px !important;
}
.form-horizontal .control-label {
  padding-top: 5px;
  margin-bottom: 0;
  text-align: right;
}
.form-horizontal div {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "Regular", "Microsoft YaHei";
  font-size: 12px;
  color: #666666;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
  word-wrap: break-word;
}
.form-horizontal .control-label {
  padding-top: 3px !important;
}
.col-sm-2 {
  width: 16.66666667%;
}
/* .col-sm-10 {
    width: 83.33333333%;
} */
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
  float: left;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
label {
  font-weight: normal;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group .pdt3px {
  padding-top: 3px;
}
.b-b {
  border-bottom: 1px solid #dddddd;
}
.line-dashed {
  border-style: dashed !important;
  background-color: transparent;
  border-width: 0;
}
.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}
.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  font-size: 0;
  overflow: hidden;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.i-checks {
  padding-left: 0;
  margin-right: 15px;
  cursor: pointer;
  color: #666666;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.panel-body tr {
  padding: 0 15px;
}
.mb20{
  margin-bottom: 20px;
}
</style>